<template>
  <el-dialog
    v-model="dialogVisible"
    title="线路详情"
    width="1000"
    :close-on-click-modal="false"
    :show-close="false"
    destroy-on-close
  >
    <div class="modal-content">
      <div class="modalA">
        <t-title name="线路详情"></t-title>
        <el-descriptions :column="data.support ? 4 : 3" border :size="'small'">
          <el-descriptions-item label="线路名称"> {{ data.name || "--" }} </el-descriptions-item>
          <el-descriptions-item label="站点总数"> {{ data.station ? data.station.length : 0 }} </el-descriptions-item>
          <el-descriptions-item label="线路色值">
            <div style="display: flex; align-items: center">
              <span>{{ data.color || "--" }}</span>
              <div style="width: 40px; height: 14px; margin-left: 20px" :style="{ background: data.color }"></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="是否环线"> {{ data.loop ? "是" : "否" }} </el-descriptions-item>
          <el-descriptions-item label="大屏显示" v-if="data.support"> {{ data.display ? "是" : "否" }} </el-descriptions-item>
          <el-descriptions-item label="线路起点">
            <span v-if="data.station && data.station.length">{{ data.station[0].name }}</span>
            <span v-else> -- </span>
          </el-descriptions-item>
          <el-descriptions-item label="线路终点" :span="1">
            <span v-if="data.station && data.station.length">
              <span v-if="data.loop">{{ data.station[0].name }}</span>
              <span v-else>
                <span v-if="data.station.length > 1">{{ data.station[data.station.length - 1].name }}</span>
                <span v-else> -- </span>
              </span>
            </span>
            <span v-else> -- </span>
          </el-descriptions-item>
          <el-descriptions-item :span="0" v-if="data.support"></el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="modalB">
        <t-title name="站点详情"></t-title>
        <station-detail :data="stationList" :station-length="8" :color="data.color"></station-detail>
      </div>
    </div>
    <div class="modal-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="ModalDetail">
import { ref, computed, onMounted } from "vue";
import TTitle from "../component/title.vue";
import StationDetail from "../component/station_detail.vue";
import { Route } from "@/api/interface/sysManagement";

const emit = defineEmits(["submit"]);
const props = defineProps<{
  data: Route.ResRouteList;
}>();

const dialogVisible = ref(false);
const stationList = computed(() => {
  if (props.data.loop && props.data.station.length > 1) {
    return props.data.station.concat(props.data.station[0]);
  } else {
    return props.data.station;
  }
});

const openDialog = () => {
  dialogVisible.value = true;
};

const closeDialog = () => {
  dialogVisible.value = false;
};

const submit = () => {
  closeDialog();
  emit("submit");
};

onMounted(() => {
  openDialog();
});
</script>

<style lang="scss" scoped>
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  .el-descriptions {
    padding-top: 0;
  }
  .modalA {
    margin-bottom: 20px;
  }
  .modalB {
    margin-bottom: 20px;
  }
}
:deep().el-descriptions .el-descriptions__label {
  width: 130px;
}
.modal-footer {
  text-align: right;
}
</style>
